<template>
  <el-card v-if="courseItem.type == 'course'" shadow="hover" class="card-contain normal-text" style="cursor: pointer" @click="goGoodsInfo">
    <div class="course-tag tw-overflow-hidden">{{courseItem.tagLabel}}</div>
    <div class="course-title">{{courseItem.name}}</div>
    <div style="margin-bottom: 12px">
      <span>{{courseItem.categoryName}}</span><span class="ornament-line"></span><span style="margin-right: 4px">{{courseItem.lessonCount + '次课'}}</span><span>{{ '共' + formatTime(courseItem.lessonDuration,'hour')}}</span>
    </div>
    <div class="tag-group over-hidden" v-if="courseItem.tagHighlightList">
      <span class="tag-item" v-for="unit in courseItem.tagHighlightList">{{unit.name}}</span>
    </div>
    <div class="teacher-group flex-start over-hidden">
      <div class="teacher-item flex-column-center" v-for="val in courseItem.teacherList.slice(0, 4)">
        <img style="width: 40px;height: 40px;border-radius: 50%;margin-bottom: 5px" :src="val.avatarPicUrl" alt="">
        <span class="over-hidden">{{val.name}}</span>
      </div>
    </div>
    <div class="card-footer flex-between">
      <span>{{'报名中'}}</span>
      <span class="course-price">{{'¥'}}
              <span style="font-size: 22px;">{{courseItem.realPrice}}</span>{{'起'}}</span>
    </div>
  </el-card>
  <el-card v-if="courseItem.type == 'live'" shadow="hover" class="card-contain normal-text" >
    <div class="live-tag">{{courseItem.tagLabel}}</div>
    <div v-if="courseItem.liveFlag == 1" class="living-logo" style="margin-bottom: 10px">
      <span>直播中</span>
    </div>
    <div v-if="courseItem.liveFlag == 0" class="flex-start-center" style="margin-bottom: 15px">
      <img style="width: 10px;height: 10px;margin-right: 8px" src="@/assets/images/home/clock-icon.png" alt="">
      <span>{{courseItem.liveTime}}</span>
    </div>
    <div style="height: 44px;margin-bottom: 20px;font-size: 16px;color: #000000;font-weight: 500;text-overflow: ellipsis">{{courseItem.name}}</div>
    <div style="margin-bottom: 33px">
      <span>{{courseItem.courseTypeName}}</span><span class="ornament-line"></span><span style="margin-right: 4px">{{courseItem.subName}}</span>
    </div>
    <div class="teacher-group flex-start over-hidden">
      <div class="teacher-item flex-column-center" v-for="val in courseItem.teacherList.slice(0, 4)">
        <img style="width: 40px;height: 40px;border-radius: 50%;margin-bottom: 5px" :src="val.avatarPicUrl" alt="">
        <span class="over-hidden">{{val.name}}</span>
      </div>
    </div>
    <div class="card-footer flex-all-center">
      <el-button class="live-button" style="color: #04ADDB;margin-right: 20px;" @click="goLogin('register')">{{'查看详情'}}</el-button>
      <el-button v-if="courseItem.liveFlag == 0" class="live-button" color="#04ADDB" style="color: #FFFFFF;border: none;" @click="goLive">{{'立即预约'}}</el-button>
      <el-button v-if="courseItem.liveFlag == 1" class="live-button" color="#10DC7D" style="color: #FFFFFF;border: none;" @click="goLive">{{'进入直播'}}</el-button>
    </div>
  </el-card>
</template>

<script setup>
import {defineProps} from "vue";
import {formatTime} from '../../utils/common.js'
import {useRouter} from 'vue-router';

const router = useRouter();
const props = defineProps({
  typeCode: {
   type: String,
   default: ''
  },
  courseItem: {
    type: Object,
    default: {}
  },
  courseId: {
    type: String,
    default: null
  },
});
function goGoodsInfo() {
  // emits('goGoodsInfo',props.courseItem.id)
  let goodsId = props.courseItem.id
  const { href } = router.resolve({
    path: "/goods/info",
    query: {
      id: goodsId,
    },
  });
  window.open(href, "_blank");
}

</script>
<style lang="scss" scoped>
.el-card {
  --el-card-border-radius: none
}
.el-card:hover {
  transform: translateY(-5px)
}
.card-contain {
  position: relative;
  width: 280px;
  height: 329px;
  padding: 27px 20px 20px 20px;
}
.normal-text {
  font-size: 12px;
  color: #9598A2;
  font-weight: 400;
}
.ornament-line {
  margin: 0 8px;
  border-left: 1px solid #9598A2;
  font-size: 10px
}
.course-title {
  height: 44px;
  margin-bottom: 20px;
  font-size: 16px;
  color: #171920;
  font-weight: normal;
  text-overflow: ellipsis
}
.course-tag {
  position: absolute;
  left: 0;
  top: 0;
  width: 77px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  color: #ffffff;
  font-size: 12px;
  border-radius: 0 0 11px 0 ;
  background: linear-gradient(75deg, #FF9494, #FF5353);
}
.live-tag {
  position: absolute;
  right: 0;
  top: 0;
  width: 77px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  color: #ffffff;
  font-size: 12px;
  border-radius: 0 0 0 11px;
  background: linear-gradient(75deg, #FF5353, #FF9494);
}
.living-logo {
  width: 78px;
  height: 22px;
  border-radius: 55px;
  color: #FF6600;
  font-size: 12px;
  text-align: right;
  padding-right: 10px;
  line-height: 22px;
  background-image: url("@/assets/images/home/living-logo.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.tag-group {
  margin-bottom: 36px
}
.tag-item {
  background: #F7F7F7;
  padding: 2px 5px;
  margin-right: 10px;
  border-radius: 2px;
  color: #9598A2;
  font-size: 12px;
  font-weight: 400;
}
.teacher-group {
  padding-bottom: 18px;
  border-bottom: 1px solid #EBEBEB;
  width: 100%;
  //overflow-x: auto;
}
.teacher-item {
  margin-right: 17px;
  width: 40px;
  height: 63px;
}
.card-footer {
  height: 53px;
  align-items: end;
}
.course-price {
  font-size: 14px;
  color: #f54030;
  line-height: 1;
}
.live-button {
  width: 110px;
  height: 38px;
  font-size: 14px;
  font-weight: 400;
  border-radius: 46px;
  border: 1px #04addb solid;
  /*background: white;*/
  text-align: center;
  align-content: center;
  /*cursor: pointer;*/
}
</style>
<style>
.tab-bar .el-tabs__nav-wrap::after{
  position: static !important;
}
.tab-bar .el-tabs__item{
  font-size: 20px;
}
.normal-dialog.el-dialog.is-align-center {
  padding: 20px 0;
  border-radius: 8px;
}
</style>
